<template>
  <div class="hot-goods">
    <div class="hot-header">
      <h5>热门商品</h5>
    </div>
    <common :resSrc="imgUrls"></common>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  .hot-goods
    margin-top: 30px
    border: 1px solid rgba(0,0,0,.1)
    border-radius: 8px
    overflow: hidden
    height: 500px
    background-color: white
    .hot-header
      background-color: #fafafa
      line-height 60px
      font-size: 18px
      position: relative
      padding-left: 30px
</style>
<script>
  import common from '../../../common/common.vue'
  export default {
    data () {
      return {
        imgUrls: [
          {
            'url': 'static/imgs/hot/h4.jpg',
            'infoh6': 'Smartisan M1/M1L 软胶保护套',
            'infop': 'TPU环保材质、细腻防滑、防油污',
            'price': '49.00',
            'activeColor': [
                {'background-color': 'red'},
                {'background-color': 'green'}
            ]
          }, {
            'url': 'static/imgs/hot/h3.jpg',
            'infoh6': 'Smartisan M1/M1L 软胶保护套',
            'infop': 'TPU环保材质、细腻防滑、防油污',
            'price': '49',
            'activeColor': [
              {'background-color': 'red'},
              {'background-color': 'green'}
            ]
          }, {
            'url': 'static/imgs/hot/h2.jpg',
            'infoh6': 'Smartisan M1/M1L 软胶保护套',
            'infop': 'TPU环保材质、细腻防滑、防油污',
            'price': '49',
            'activeColor': [
              {'background-color': 'red'},
              {'background-color': 'green'}
            ]
          }, {
            'url': 'static/imgs/hot/h1.jpg',
            'infoh6': 'Smartisan M1/M1L 软胶保护套',
            'infop': 'TPU环保材质、细腻防滑、防油污',
            'price': '49',
            'activeColor': [
              {'background-color': 'red'}
            ]}
        ]
      }
    },
    components: {
      common
    }
  }
</script>
